 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNum"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="search.carName" placeholder="请输入车名"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="search.brandName" placeholder="请输入车牌"></el-input>
                </el-col>
                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                    </div>
                </el-col></el-form
            >
            <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus">新增</el-button>
            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="#" sortable> </el-table-column>
                <el-table-column prop="carName" label="车名"> </el-table-column>
                <el-table-column prop="brandName" label="车牌"> </el-table-column>
                <el-table-column prop="typeName" label="类型"> </el-table-column>
                <el-table-column prop="vin" label="车辆识别码" width="120px"> </el-table-column>
                <el-table-column prop="airSuction" label="进气方式"> </el-table-column>
                <el-table-column prop="seating" label="座位数"> </el-table-column>
                <el-table-column prop="displacement" label="排量"> </el-table-column>
                <el-table-column prop="displacement" label="排量"> </el-table-column>
                <el-table-column prop="fcphk" label="百公里油耗" width="100px"> </el-table-column>
                <el-table-column prop="buyPrice" label="进价"> </el-table-column>
                <el-table-column prop="price" label="租价"> </el-table-column>
                <el-table-column prop="state" label="状态" :formatter="getStatusName"> </el-table-column>
                <el-table-column prop="shopName" label="门店" width="100px"> </el-table-column>
                <el-table-column prop="intro" label="简介" width="200px"> </el-table-column>
                <el-table-column label="操作"  fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateInfo(scope.$index, scope.row)" icon="el-icon-edit" type="success"
                            >编辑</el-button
                        >
                        <el-button size="mini" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="danger"
                            >删除</el-button
                        >
                        <el-button type="primary" size="mini" @click="recordBtn(scope.$index, scope.row)">维修</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[1, 5, 10, 20, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            >
            </el-pagination>
            <!--新增/修改 Form -->
            <el-dialog title="车辆管理" :visible.sync="editInfoState">
                <el-form :model="formInfo">
                    <el-form-item label="车名" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.carName" placeholder="车名" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车类型" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.type" placeholder="请选择">
                            <el-option v-for="item in optionsType" :key="item.id" :label="item.typeName" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车牌" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.brandId" placeholder="请选择">
                            <el-option v-for="item in optionsBrand" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="配置" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.configId" placeholder="请选择">
                            <el-option v-for="item in optionsConfig" :key="item.id" :label="item.typename" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆进价" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.buyPrice" placeholder="车辆进价" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆租价" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.price" placeholder="车辆租价" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆状态" :label-width="formLabelWidth">
                        <el-radio v-model="formInfo.state" :label="1">启用</el-radio>
                        <el-radio v-model="formInfo.state" :label="0">禁用</el-radio>
                    </el-form-item>
                    <el-form-item label="门店" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.shopId" placeholder="请选择">
                            <el-option v-for="item in optionsShop" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="简介" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.intro" placeholder="简介" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editInfoState = false">取 消</el-button>
                    <el-button type="primary" @click="saveInfo">确 定</el-button>
                </div>
            </el-dialog>
            <!--维修弹出框-->
            <el-dialog title="维修记录添加" :visible.sync="addFormVisible">
                <el-form :model="form">
                    <el-form-item label="车辆ID" :label-width="formLabelWidth">
                        <el-input :disabled=true v-model="form.carId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="维修厂" :label-width="formLabelWidth">
                        <el-select v-model="form.maintainShopId" placeholder="请选择">
                            <el-option
                                v-for="maintainShop in maintainShops"
                                :key="maintainShop.id"
                                :label="maintainShop.name"
                                :value="maintainShop.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="金额" :label-width="formLabelWidth">
                        <el-input v-model="form.amount" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="维修时间" :label-width="formLabelWidth">
                        <el-input v-model="form.addtime" autocomplete="off" type="date"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="add()">确定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);

export default {
    data() {
        return {
            tableData: [],
            page: {},
            formInfo: {},
            search: { pageNum: 1, pageSize: 5 },
            formLabelWidth: '120px',
            editInfoState: false,
            optionsType: [],
            optionsBrand: [],
            optionsConfig: [],
            optionsShop: [],
            form: { },
            addFormVisible: false,
            maintainShops: []
        };
    },
    created: function () {
        this.load();
        this.loadType();
        this.loadBrand();
        this.loadConfig();
        this.loadShop();
        this.loadmaintainShop();
    },
    methods: {
        //初始化数据
        load() {
            var _this = this;
            //页面初始化时，加载的方法
            this.$http.post('http://localhost:9999/cars/car/queryAll', this.search).then((response) => {
                _this.tableData = response.data.data.list;
                _this.page = response.data.data;
                _this.total = response.data.data.total;
            });
        },
        loadType() {
            var _this = this;
            this.$http
                .get('http://localhost:9999/cars/carType/queryAllByCarType', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.optionsType = response.data.data.list;
                });
        },
        loadBrand() {
            var _this = this;
            this.$http
                .get('http://localhost:9999/cars/brand/queryAll', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.optionsBrand = response.data.data.list;
                });
        },
        loadConfig() {
            var _this = this;
            this.$http
                .get('http://localhost:9999/cars/carTypeConfigDetails/queryPageByParam', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.optionsConfig = response.data.data.list;
                });
        },
        loadShop() {
            var _this = this;
            this.$http
                .get('http://localhost:9999/cars/shop/queryAll', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.optionsShop = response.data.data.list;
                });
        },
        loadmaintainShop() {
            var _this = this;
            this.$http
                .get('http://localhost:9999/cars/maintainShop/queryAll', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.maintainShops = response.data.data.list;
                });
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.search.pageNum = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        //刷新
        emptyBtn() {
            this.search = {};
            this.search.pageNum = 1;
            this.search.pageSize = 5;
            this.load();
        },
        getStatusName(row, column, cellValue) {
            var tmpType = '';
            if (cellValue == 1) {
                tmpType = '可出租';
            } else if (cellValue == 2) {
                tmpType = '维修中';
            } else if (cellValue == 3) {
                tmpType = '已出租';
            }
            return tmpType;
        },
        //维修
        recordBtn: function (index, row) {
            console.log("车辆ID"+row)
            this.form.carId = row.id;
            this.addFormVisible = true;
        },
        addBtn() {
            this.formInfo = {};
            this.editInfoState = true;
        },
        updateInfo: function (index, row) {
            this.formInfo = row;
            this.editInfoState = true;
        },
        saveInfo: function () {
            var _this = this;
            if (_this.formInfo.id != null && _this.formInfo.id != '' && _this.formInfo.id != undefined) {
                axios
                    .put('http://localhost:9999/cars/car/update', _this.formInfo)
                    .then(function (response) {
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        //正确请求时，回调函数
                        console.log(response);
                        _this.load();
                        _this.editInfoState = false;
                    })
                    .catch(function (error) {
                        _this.$message.error('你错了。。。');
                        _this.editInfoState = false;
                        _this.load();
                        //失败处理
                        console.log(error);
                    });
            } else {
                axios
                    .post('http://localhost:9999/cars/car/insert', _this.formInfo)
                    .then(function (response) {
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });
                        //正确请求时，回调函数
                        _this.load();
                        _this.editInfoState = false;
                    })
                    .catch(function (error) {
                        _this.$message.error('你错了。。。');
                        //失败处理
                        console.log(error);
                    });
            }
        },
        deleteInfo: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var _this = this;
                    axios
                        .delete('http://localhost:9999/cars/car/deleteById?id=' + row.id)
                        .then(function (response) {
                            if (response.status == 200) {
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //重新加载数据
                                _this.load();
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //维修
        add() {
            var _this = this;
            this.$http
                .post('http://localhost:9999/cars/maintainRecord/insertMaintainRecord', this.form)
                .then(function (response) {
                    console.log(response);
                    if (response.status == 200) {
                        //提示成功
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        //_this.$message.success("恭喜你，添加成功");
                        //关闭弹出框
                        _this.addFormVisible = false;
                        //重新加载数据
                        _this.load();
                        //清空form
                        _this.form = {};
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    _this.$message.error('你错了');
                });
        }
    }
};
</script>
<style>
</style>